<template>
  <div class="detail">
    <div class="title">
      <div class="t-icon">
        <i class="iconfont icon-changyongicon-" @click="go_back"></i>
      </div>
      <div class="t-wz">
        <h3>{{newurl.artist}}</h3>
        <p>{{newurl.title}}&nbsp; ></p>
      </div>
    </div>
    <div class="zp-box" @click="changezp">
      <!-- //转盘 -->
      <div class="zp" v-show="isword">
        <div class="item1">
          <img :src="newurl.pic" alt />
        </div>
        <div class="item2"></div>
        <div class="item3"></div>
        <div class="item4"></div>
        <div class="item5"></div>
        <div class="item6"></div>
        <div class="item7"></div>
        <div class="item8"></div>
        <div class="item9"></div>
        <div class="item10"></div>
      </div>
      <!-- 歌词 -->
      <div class="musicWord" v-show="!isword">
        <div class="word" v-for="(item,index) in Word" :key="index">{{item.c}}</div>
      </div>
      <!-- z -->
      <div class="gt" v-show="isword">
        <img src="../../assets/img/gt.png" alt />
      </div>
    </div>
    <div class="bottom-box">
      <!-- 进度条 -->
      <div class="time-box">
        <!-- 当前播放进度 -->
        <div class="left" id="songtime">{{current_Time}}</div>

        <div class="jindutiao" @click="updateX">
          <van-progress color="#f2826a" :percentage="Process_Now||0" />
          <div
            class="kuai"
            @mousedown.stop="down"
            @touchstart.stop="down"
            @mousemove.stop="move"
            @touchmove.stop="move"
            @mouseup.stop="end"
            @touchend.stop="end"
            :style="{left:position.x+'px'}"
          ></div>
        </div>
        <!-- 音乐总时长 -->
        <div class="right">{{time_All}}</div>
      </div>
      <!-- 播放控件 -->
      <div class="to_bottom">
        <!-- 播放方式 -->
        <i class="iconfont icon-xunhuan"></i>
        <!-- 上一首 -->
        <i class="iconfont icon-prev" @click="playPre"></i>
        <!-- 播放暂停 -->
        <i class="iconfont" :class="isbofang1?'icon-ting':'icon-fang'" @click="change"></i>
        <!-- 下一首 -->
        <i class="iconfont icon-next" @click="playNext"></i>
        <!-- 播放列表 -->
        <i class="iconfont icon-liebiao" @click.stop="show()"></i>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="grag" :class="isout?'up':'noup'" @click.stop="up"></div>
    <div class="musiclist" :class="isshow?'show':'bushow'">
      <div class="fix">
        <p>
          当前播放
          <span>({{num1}})</span>
        </p>
        <div class="top">
          <div class="top-l">
            <i class="iconfont icon-xunhuan"></i> 单曲循环
          </div>
          <div class="top-r">
            <i class="iconfont icon-shoucang"></i> 收藏全部
            <i class="iconfont icon-shangchu" @click="delAll"></i>
          </div>
        </div>
      </div>
      <!-- 播放列表 -->
      <div class="list" v-for="(item,index) in musicList" :key="index" @click="playlist(index)">
        <div class="we">
          <span>{{index+1}}</span>.
          <span>{{item.title}}</span> -
          <span>{{item.artist}}</span>
        </div>
        <div @click.stop="delet(index) " class="x">X</div>
      </div>
    </div>
  </div>
</template>
<script>
</script>
<script>
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";
import { api } from "../../assets/http/api";
var dx, dy;
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
export default {
  components: {},
  data() {
    return {
      x: 0,
      num1: 0,
      isbofang1: "",
      timer: "",
      isshow: false,
      isout: false,
      musicList: [],
      time_All: "00:00",
      current_Time: "00:00",
      Process_Now: 0,
      isword: true,
      // 歌词格式化
      Word: null,
      //当前行
      lineNo: 0,
      //c位
      C_pos: 6,
      offset: -37,
      oLRC: {
        ti: "", //歌曲名
        ar: "", //演唱者
        al: "", //专辑名
        by: "", //歌词制作人
        offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
        ms: [{
          t:'',
          m:''
        }] //歌词数组{t:时间,c:歌词}
      },
      flags: false,
      position: {
        x: 60
      }
    };
  },
  methods: {
    ...mapMutations(["getUrl", "setTime", "setMusic", "setpalyList"]),
    //高亮显示歌词当前行及文字滚动控制，行号为lineNo
    lineHigh() {
      let ul = document.querySelector(".musicWord"); //歌词容器列表
      let lis = document.querySelectorAll(".word"); //歌词数组
      ul.style.transform = "translateY(10px)";
      if (this.lineNo > 0) {
        lis[this.lineNo - 1].classList.remove("lineHigh"); //去掉上一行的高亮样式
      }
      lis[this.lineNo].classList.add("lineHigh"); //高亮显示当前行

      //文字滚动
      if (this.lineNo > this.C_pos) {
        ul.style.transform =
          "translateY(" + (this.lineNo - this.C_pos) * this.offset + "px)"; //整体向上滚动一行高度
      }
    },
    goback() {
      let ul = document.querySelector(".musicWord");
      document.querySelector(".lineHigh").classList.remove("lineHigh");
      ul.style.transform = "translateY(205px)";
      this.lineNo = 0;
    },
    createLrcObj(lrc) {
      if (lrc.Word == "") return;
      var lrcs = lrc.Word.split("\n"); //用回车拆分成数组
      for (var i in lrcs) {
        //遍历歌词数组
        lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
        var t = lrcs[i].substring(
          lrcs[i].indexOf("[") + 1,
          lrcs[i].indexOf("]")
        ); //取[]间的内容
        var s = t.split(":"); //分离:前后文字
        if (isNaN(parseInt(s[0]))) {
          //不是数值
          for (var i in this.oLRC) {
            if (i != "ms" && i == s[0].toLowerCase()) {
              this.oLRC[i] = s[1];
            }
          }
        } else {
          //是数值
          var arr = lrcs[i].match(/\[(\d+:.+?)\]/g); //提取时间字段，可能有多个
          var start = 0;
          for (var k in arr) {
            start += arr[k].length; //计算歌词位置
          }
          var content = lrcs[i].substring(start); //获取歌词内容
          for (var k in arr) {
            var t = arr[k].substring(1, arr[k].length - 1); //取[]间的内容
            var s = t.split(":"); //分离:前后文字
            this.oLRC.ms.push({
              //对象{t:时间,c:歌词}加入ms数组
              t: (parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3),
              c: content
            });
          }
        }
      }

      this.oLRC.ms.sort(function(a, b) {
        //按时间顺序排序
        return a.t - b.t;
      });
    },
    changezp() {
      this.isword = !this.isword;
    },
    // 实现移动端拖拽
    down(event) {
      this.flags = true;
      clearInterval(this.timer);
      this.isbofang1 = true;
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      dx = touch.clientX - event.target.offsetLeft;
      dy = touch.clientY - event.target.offsetTop;
    },
    move(event) {
      if (this.flags) {
        var touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        // 定位滑块的位置
        this.position.x = touch.clientX - dx;
        // 限制滑块超出页面
        if (this.position.x < 61.8) {
          this.position.x = 61.8;
        } else if (
          this.position.x >
          screenWidth - touch.target.clientWidth - 55
        ) {
          this.position.x = screenWidth - touch.target.clientWidth - 55;
        }
        this.current_Time = this.timeFormat(
          ((this.position.x - 61.8) /
            document.querySelector(".jindutiao").offsetWidth) *
            this.aMusic.duration
        );
        document.getElementById("songtime").innerHTML = this.current_Time;
        this.Process_Now =
          ((this.position.x - 61.8) /
            document.querySelector(".jindutiao").offsetWidth) *
          100;

        //阻止页面的滑动默认事件
        document.addEventListener(
          "touchmove",
          function() {
            event.preventDefault();
          },
          false
        );
      }
    },
    //鼠标释放时候的函数
    end() {
      this.x = this.position.x - 61.8;
      this.flags = false;
      this.isbofang1 = false;
    },
    // 更新进度条位置
    updateX(event) {
      this.x = event.offsetX;
      this.Process_Now = (event.offsetX / this.aMusic.duration) * 100;
    },
    // 格式化时间
    timeFormat(number) {
      var minute = parseInt(number / 60);
      var second = parseInt(number % 60);
      minute = minute >= 10 ? minute : "0" + minute;
      second = second >= 10 ? second : "0" + second;
      return minute + ":" + second;
    },
    //播放列表
    playlist(index) {
      this.isbofang1 = false;
      // this.isout = false;
      let li = document.querySelectorAll(".list .we");
      li[index].classList.add("isred");
      li.forEach((el, indx) => {
        if (indx != index) {
          li[indx].classList.remove("isred");
        }
      });
      let music = this.musicList[index];
      this.getUrl(music);
      this.aMusic.play();
      // this.isshow = false;
      this.$store.commit("setbofang", false);
      this.isred = true;
    },
    // 播放上一首
    playPre() {
      this.current_Time = "00:00";
      this.time_All = "00:00";
      this.isbofang1 = false;
      let arr = [];
      this.musicList.forEach(item => {
        arr.push(item.id);
      });
      let ne = this;
      let index = arr.findIndex(n => n == ne.newurl.id);
      let newmusic = 0;
      if (index == 0) {
        newmusic = this.musicList[this.musicList.length - 1];
      } else {
        newmusic = this.musicList[index - 1];
      }
      this.setMusic(false);
      this.aMusic.playMusic(newmusic.src);
      this.getUrl(newmusic);
      this.goback();
    },
    // 播放下一首
    playNext() {
      this.current_Time = "00:00";
      this.time_All = "00:00";
      this.isbofang1 = false;
      let arr = [];
      this.musicList.forEach(item => {
        arr.push(item.id);
      });
      let ne = this;
      let index = arr.findIndex(n => n == ne.newurl.id);
      let newmusic = 0;
      if (index == this.musicList.length - 1) {
        newmusic = this.musicList[0];
      } else {
        newmusic = this.musicList[index + 1];
      }
      this.aMusic.playMusic(newmusic.src);
      this.getUrl(newmusic);
      this.setMusic(false);
      this.goback();
    },
    up() {
      this.isshow = false;
      this.isout = false;
    },
    delAll() {
      this.musicList.splice(0, this.musicList.length);
    },
    delet(id) {
      this.musicList.splice(id, 1);
    },
    go_back() {
      clearInterval(this.timer);
      this.aMusic.ontimeupdate = null;
      this.oLRC.ms = [];
      this.Word = [];
      this.$store.commit("setMusic", true);

      window.history.go(-1);
    },
    show() {
      this.isshow = !this.isshow;
      this.isout = true;
      let li = document.querySelectorAll(".list .we");
      li[this.myidx].classList.add("isred");
    },
    //暂停按钮
    change() {
      if (this.isbofang) {
        this.aMusic.play();
        this.isbofang1 = !this.isbofang1;
        this.$store.commit("setbofang", !this.isbofang);
      } else {
        clearInterval(this.timer);
        this.aMusic.pause();
        this.isbofang1 = !this.isbofang1;
        this.$store.commit("setbofang", !this.isbofang);
      }
    }
  },
  computed: {
    ...mapGetters(["timenow", "isbofang", "newurl", "newmusicList", "myidx"])
  },
  watch: {
    isbofang1() {
      this.setMusic(false);
      if (!this.isbofang1) {
        this.timer = setInterval(() => {
          try {
            this.Process_Now =
              (this.aMusic.currentTime / this.aMusic.duration) * 100; //将Process_Now转换为整数并给它加一个px单位
            this.current_Time = this.timeFormat(this.aMusic.currentTime); //获取音频的已经播放的时间并将它转换成mm:ss的格式
            this.time_All = this.timeFormat(this.aMusic.duration); //获取音频的总时间并将它转换成mm:ss的格式
            document.getElementById("songtime").innerHTML = this.current_Time; //将时间显示为“已播放时间 | 总时长”的形式
            document.querySelector(".right").innerHTML = this.time_All;
            if (this.Process_Now < 0) {
              this.Process_Now = 0;
            } else if (this.Process_Now > 100) {
              this.Process_Now = 100;
            }
          } catch {}
        }, 1000);
      }
    },
    musicList(newVal) {
      this.num1 = this.musicList.length;
      this.setpalyList(newVal);
    },
    newurl(newVal) {
      this.setMusic(false);
      try {
        this.$axios(api.getWord + `${newVal.id}`).then(res => {
          newVal.Word = res.data.lrc.lyric;
          this.oLRC.ms = [];
          this.Word = [];
          this.createLrcObj(newVal);
          this.oLRC.ms = this.oLRC.ms.filter(el => {
            return el.c != "";
          });
          this.Word = this.oLRC.ms;
        });
      } catch  {
        
      }
    },
    Process_Now(newVal) {
      this.position.x =
        (newVal / 100) * document.querySelector(".jindutiao").offsetWidth +
        61.98;
    },
    //控制进度条
    x(newVal) {
      let ul = document.querySelector(".musicWord"); //歌词容器列表
      let lis = document.querySelectorAll(".word"); //歌词数组
      lis[this.lineNo - 1].classList.remove("lineHigh");
      var place =
        (newVal / document.querySelector(".jindutiao").offsetWidth) *
        this.aMusic.duration;
      this.Process_Now = (place / this.aMusic.duration) * 100;
      this.aMusic.currentTime = place;
      let nowt = this.aMusic.currentTime;
      let index = null;
      try {
        this.oLRC.ms.forEach((el, idx) => {
          if (el.t <= nowt && this.oLRC.ms[idx + 1].t >= nowt) {
            index = idx;
          }
        });
        this.lineNo = index;
      } catch {}
    }
  },
  mounted() {
    try {
      this.createLrcObj(this.newurl);
      this.oLRC.ms = this.oLRC.ms.filter(el => {
        return el.c != "";
      });

      this.Word = this.oLRC.ms;
      let nowt = this.aMusic.currentTime;
      let index = null;
      this.oLRC.ms.forEach((el, idx) => {
        if (el.t <= nowt && this.oLRC.ms[idx + 1].t >= nowt) {
          index = idx;
        }
      });
      this.lineNo = index;
      this.aMusic.ontimeupdate = () => {
        if (this.lineNo == this.oLRC.ms.length) return;
        var curTime = this.aMusic.currentTime; //播放器时间
        if (parseFloat(this.oLRC.ms[this.lineNo].t) <= curTime) {
          this.lineHigh(); //高亮当前行
          this.lineNo++;
        }
      };
      this.aMusic.onended = () => {
        this.goback(); //回滚歌词
        this.aMusic.play();
      };
    } catch{}
  },
  async created() {
    //初始化播放时间
    this.current_Time = this.timeFormat(this.aMusic.currentTime);
    this.time_All = this.timeFormat(this.aMusic.duration);
    //初始化播放的进度条
    this.Process_Now = (this.aMusic.currentTime / this.aMusic.duration) * 100;

    this.$store.commit("setMusic", false);
    this.musicList = this.newmusicList[0];
    this.isbofang1 = this.isbofang;
  }
};
</script>
<style lang="scss">
@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
.isred {
  color: red;
}
.kuai {
  position: absolute;
  top: -4.5px;
  box-sizing: border-box;
  padding: 0 5px;
  color: #fff;
  font-size: 0px;
  line-height: 1.6;
  text-align: center;
  word-break: keep-all;
  width: 10px;
  border-radius: 145px;
  height: 10px;
  background-color: none;
}
.bottom-box {
  position: absolute;
  width: 100%;
  bottom: 17vw;
}
.detail {
  display: block;
  overflow: hidden;
  background-color: #666ee4;
  background-image: linear-gradient(45deg, #07c18ba6, transparent);
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  width: 100vw;
  height: 100vh;
  .up {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    height: 100%;
    background-color: gray;
    opacity: 0.5;
  }
  .noup {
    display: none;
  }
  .time-box {
    transform: translateY(-35px);
    display: flex;
    .left {
      font-size: 13px;
      width: 72px;
      color: white;
      transform: translate(23px, -7px);
    }
    .right {
      font-size: 13px;
      width: 72px;
      color: white;
      transform: translate(10px, -8px);
    }
  }
  .jindutiao {
    width: 76vw;
    margin: 0 auto;
    touch-action: none;
    .van-progress {
      position: relative;
      height: 1px;
      background: #ebedf0;
      border-radius: 4px;
    }
    .van-progress__pivot {
      position: absolute;
      top: 50%;
      box-sizing: border-box;
      padding: 0 5px;
      color: #fff;
      font-size: 0px;
      line-height: 1.6;
      text-align: center;
      word-break: keep-all;
      width: 10px;
      border-radius: 145px;
      height: 10px;
    }
  }
  .title {
    width: 100vw;
    height: 10vh;
    display: flex;
    .t-icon {
      line-height: 10vh;
      text-align: center;
      width: 20vw;
      i {
        font-size: 35px;
        color: white;
      }
    }
    .t-wz {
      width: 80vw;
      padding-top: 1vh;
      padding-left: 9vh;

      h3 {
        color: white;
      }
      p {
        color: #bab8b8;
      }
    }
  }
  .zp-box {
    height: 62%;
    overflow: scroll;
    transform: translateY(3vw);
    .zp {
      width: 80vw;
      height: 80vw;
      border: 2px solid black;
      border-radius: 50%;
      position: relative;
      margin: 11vh auto;
      overflow: hidden;
      animation: rotate 2s infinite linear;
      div[class*="item"] {
        position: absolute;
        border: 20px solid black;
        border-radius: 50%;
      }
      .item1 {
        width: 79vw;
        height: 79vw;
        z-index: 1;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .item2 {
        width: 78vw;
        height: 78vw;
        left: 2px;
        top: 2px;
        z-index: 2;
      }
      .item3 {
        width: 77vw;
        height: 77vw;
        left: 4px;
        top: 4px;
        z-index: 3;
      }
      .item4 {
        width: 76vw;
        height: 76vw;
        left: 6px;
        top: 6px;
        z-index: 4;
      }
      .item5 {
        width: 75vw;
        height: 75vw;
        left: 8px;
        top: 8px;
        z-index: 5;
      }

      .item6 {
        width: 74vw;
        height: 74vw;
        left: 10px;
        top: 10px;
        z-index: 6;
      }
      .item7 {
        width: 73vw;
        height: 73vw;
        left: 12px;
        top: 12px;
        z-index: 7;
      }
      .item8 {
        width: 72vw;
        height: 72vw;
        left: 14px;
        top: 14px;
        z-index: 8;
      }

      .item9 {
        width: 71vw;
        height: 71vw;
        left: 16px;
        top: 16px;
        z-index: 9;
      }
      .item10 {
        width: 70vw;
        height: 70vw;
        left: 18px;
        top: 18px;
        z-index: 10;
      }
    }
    .gt {
      position: absolute;
      top: -3vh;
      left: 40vw;
      z-index: 100;
      img {
        width: 40vw;
      }
    }
    .musicWord {
      text-align: center;
      color: rgb(186, 184, 184);
      overflow: hidden;
      z-index: 111;
      transform: translateY(205px);
      transition: all 1s;
      touch-action: none;
      .word {
        margin-bottom: 15px;
        line-height: 22px;
        transition-duration: 600ms;
        touch-action: none;
      }
    }
  }
  .to_bottom {
    width: 100vw;
    position: absolute;
    color: lightgoldenrodyellow;
    text-align: center;
    display: flex;
    justify-content: space-around;
    font-size: 20px;
  }
  .show {
    display: block;
  }
  .bushow {
    display: none;
  }
}
.lineHigh {
  /*高亮行*/
  color: linen;
}
</style>